<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
<html>
  <head>
    <title>inGrid</title>
    <style type="text/css">
      * { margin: 0; padding: 0; }
      body {
        background: #fff;
        font: 12px/18px "Lucida Grande", Helvetica, Arial, sans-serif;
      }
      p,ul,ol {margin: 0 0 18px 0; }
      ol li {font-weight: bold; color: #444; margin-left: 28px;}
      div.wrapper {margin: 46px 0 0 36px; width: 600px; float: left;}
      h1 {font-size: 26px; color: #660000; margin-bottom: 26px;}
      h2 {font-size: 14px; color: #990000; margin-bottom: 18px;}
      h3 {font-size: 12px; color: #AA0000; margin-bottom: 0px;}
      a {color: #660000;}
      div.col1 {
        width: 285px; float: left; margin-right: 30px; display: block;
      }
      div.col2 {
        width: 285px; float: left; display: block;
      }
      div.sidebar {
        float: left; width: 120px; margin: 72px 0 0 12px; font-size: 11px;
      }
      div.sidebar h2 {
        margin-bottom: 0;
        color: #aaa;
      }
      img#letterform {float: left; margin: 0 18px 18px 0; border: 1px solid #666;}
    </style>
    <!-- <script type="text/javascript" src="http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js"></script> -->
    <script type="text/javascript" src="ingrid.js"></script>
  </head>
  <body>
    <div class="wrapper">
    <h1>inGrid Demo</h1>
    <p>inGrid is a simple tool to help align your text to a baseline grid.  Enter your line height and offset in pixels 
      in the inGrid control box and click &#8220;inGrid it&#8221; to overlay a baseline grid in red.  You can
      also install inGrid as a bookmarklet and summon it on any page &mdash; read <a href="http://robgoodlatte.com/2007/07/31/inGrid-your-baselines/">the blog post</a> for full details.  
    </p>

    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ullamcorper nibh non erat. 
      Quisque ligula. Etiam fringilla nisi consequat eros. Quisque eu nulla et lorem vulputate condimentum. 
      Vestibulum pretium. Suspendisse potenti. Pellentesque pede. Cum sociis natoque penatibus et magnis dis 
      parturient montes, nascetur ridiculus mus. In hac habitasse platea dictumst. Aenean nulla nunc, 
      tincidunt at, vulputate et, pretium non, arcu. Aliquam erat volutpat.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ullamcorper nibh non erat. 
      Quisque ligula. Etiam fringilla nisi consequat eros. Quisque eu nulla et lorem vulputate condimentum. 
      Vestibulum pretium. Suspendisse potenti. Pellentesque pede. Cum sociis natoque penatibus et magnis dis 
      parturient montes, nascetur ridiculus mus. In hac habitasse platea dictumst. Aenean nulla nunc, 
      tincidunt at, vulputate et, pretium non, arcu. Aliquam erat volutpat.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ullamcorper nibh non erat. 
      Quisque ligula. Etiam fringilla nisi consequat eros. Quisque eu nulla et lorem vulputate condimentum. 
      Vestibulum pretium. Suspendisse potenti. Pellentesque pede. Cum sociis natoque penatibus et magnis dis 
      parturient montes, nascetur ridiculus mus. In hac habitasse platea dictumst. Aenean nulla nunc, 
      tincidunt at, vulputate et, pretium non, arcu. Aliquam erat volutpat.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ullamcorper nibh non erat. 
      Quisque ligula. Etiam fringilla nisi consequat eros. Quisque eu nulla et lorem vulputate condimentum. 
      Vestibulum pretium. Suspendisse potenti. Pellentesque pede. Cum sociis natoque penatibus et magnis dis 
      parturient montes, nascetur ridiculus mus. In hac habitasse platea dictumst. Aenean nulla nunc, 
      tincidunt at, vulputate et, pretium non, arcu. Aliquam erat volutpat.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ullamcorper nibh non erat. 
      Quisque ligula. Etiam fringilla nisi consequat eros. Quisque eu nulla et lorem vulputate condimentum. 
      Vestibulum pretium. Suspendisse potenti. Pellentesque pede. Cum sociis natoque penatibus et magnis dis 
      parturient montes, nascetur ridiculus mus. In hac habitasse platea dictumst. Aenean nulla nunc, 
      tincidunt at, vulputate et, pretium non, arcu. Aliquam erat volutpat.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ullamcorper nibh non erat. 
      Quisque ligula. Etiam fringilla nisi consequat eros. Quisque eu nulla et lorem vulputate condimentum. 
      Vestibulum pretium. Suspendisse potenti. Pellentesque pede. Cum sociis natoque penatibus et magnis dis 
      parturient montes, nascetur ridiculus mus. In hac habitasse platea dictumst. Aenean nulla nunc, 
      tincidunt at, vulputate et, pretium non, arcu. Aliquam erat volutpat.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ullamcorper nibh non erat. 
      Quisque ligula. Etiam fringilla nisi consequat eros. Quisque eu nulla et lorem vulputate condimentum. 
      Vestibulum pretium. Suspendisse potenti. Pellentesque pede. Cum sociis natoque penatibus et magnis dis 
      parturient montes, nascetur ridiculus mus. In hac habitasse platea dictumst. Aenean nulla nunc, 
      tincidunt at, vulputate et, pretium non, arcu. Aliquam erat volutpat.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ullamcorper nibh non erat. 
      Quisque ligula. Etiam fringilla nisi consequat eros. Quisque eu nulla et lorem vulputate condimentum. 
      Vestibulum pretium. Suspendisse potenti. Pellentesque pede. Cum sociis natoque penatibus et magnis dis 
      parturient montes, nascetur ridiculus mus. In hac habitasse platea dictumst. Aenean nulla nunc, 
      tincidunt at, vulputate et, pretium non, arcu. Aliquam erat volutpat.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ullamcorper nibh non erat. 
      Quisque ligula. Etiam fringilla nisi consequat eros. Quisque eu nulla et lorem vulputate condimentum. 
      Vestibulum pretium. Suspendisse potenti. Pellentesque pede. Cum sociis natoque penatibus et magnis dis 
      parturient montes, nascetur ridiculus mus. In hac habitasse platea dictumst. Aenean nulla nunc, 
      tincidunt at, vulputate et, pretium non, arcu. Aliquam erat volutpat.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ullamcorper nibh non erat. 
      Quisque ligula. Etiam fringilla nisi consequat eros. Quisque eu nulla et lorem vulputate condimentum. 
      Vestibulum pretium. Suspendisse potenti. Pellentesque pede. Cum sociis natoque penatibus et magnis dis 
      parturient montes, nascetur ridiculus mus. In hac habitasse platea dictumst. Aenean nulla nunc, 
      tincidunt at, vulputate et, pretium non, arcu. Aliquam erat volutpat.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ullamcorper nibh non erat. 
      Quisque ligula. Etiam fringilla nisi consequat eros. Quisque eu nulla et lorem vulputate condimentum. 
      Vestibulum pretium. Suspendisse potenti. Pellentesque pede. Cum sociis natoque penatibus et magnis dis 
      parturient montes, nascetur ridiculus mus. In hac habitasse platea dictumst. Aenean nulla nunc, 
      tincidunt at, vulputate et, pretium non, arcu. Aliquam erat volutpat.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ullamcorper nibh non erat. 
      Quisque ligula. Etiam fringilla nisi consequat eros. Quisque eu nulla et lorem vulputate condimentum. 
      Vestibulum pretium. Suspendisse potenti. Pellentesque pede. Cum sociis natoque penatibus et magnis dis 
      parturient montes, nascetur ridiculus mus. In hac habitasse platea dictumst. Aenean nulla nunc, 
      tincidunt at, vulputate et, pretium non, arcu. Aliquam erat volutpat.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ullamcorper nibh non erat. 
      Quisque ligula. Etiam fringilla nisi consequat eros. Quisque eu nulla et lorem vulputate condimentum. 
      Vestibulum pretium. Suspendisse potenti. Pellentesque pede. Cum sociis natoque penatibus et magnis dis 
      parturient montes, nascetur ridiculus mus. In hac habitasse platea dictumst. Aenean nulla nunc, 
      tincidunt at, vulputate et, pretium non, arcu. Aliquam erat volutpat.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ullamcorper nibh non erat. 
      Quisque ligula. Etiam fringilla nisi consequat eros. Quisque eu nulla et lorem vulputate condimentum. 
      Vestibulum pretium. Suspendisse potenti. Pellentesque pede. Cum sociis natoque penatibus et magnis dis 
      parturient montes, nascetur ridiculus mus. In hac habitasse platea dictumst. Aenean nulla nunc, 
      tincidunt at, vulputate et, pretium non, arcu. Aliquam erat volutpat.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ullamcorper nibh non erat. 
      Quisque ligula. Etiam fringilla nisi consequat eros. Quisque eu nulla et lorem vulputate condimentum. 
      Vestibulum pretium. Suspendisse potenti. Pellentesque pede. Cum sociis natoque penatibus et magnis dis 
      parturient montes, nascetur ridiculus mus. In hac habitasse platea dictumst. Aenean nulla nunc, 
      tincidunt at, vulputate et, pretium non, arcu. Aliquam erat volutpat.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ullamcorper nibh non erat. 
      Quisque ligula. Etiam fringilla nisi consequat eros. Quisque eu nulla et lorem vulputate condimentum. 
      Vestibulum pretium. Suspendisse potenti. Pellentesque pede. Cum sociis natoque penatibus et magnis dis 
      parturient montes, nascetur ridiculus mus. In hac habitasse platea dictumst. Aenean nulla nunc, 
      tincidunt at, vulputate et, pretium non, arcu. Aliquam erat volutpat.
    </p>
    
    <div class="col1">
    <h2>Column with Header</h2>
    <p>

      Phasellus eros justo, suscipit nec, convallis eget, adipiscing vel, nulla. Quisque nonummy. Nam sem 
      turpis, vestibulum nec, nonummy a, sollicitudin eu, ante. Aliquam erat volutpat. Vestibulum ornare. 
    </p>
    <p>

      In hac habitasse platea dictumst. Aenean nulla nunc, 
      tincidunt at, vulputate et, pretium non, arcu. Aliquam erat volutpat.
    </p>
    </div>
    <div class="col2">
      <p>
      In eu quam. Sed velit augue, rhoncus quis, tempus sed, euismod eu, tellus. Nam vitae libero. 
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc posuere. Nulla auctor est vel sem. 
      Nunc tellus nulla, nonummy sit amet, pharetra sed.
      </p>
      <h3>The Plan</h3>
      <ol>

        <li>inGrid Baselines</li>
        <li>???</li>
        <li>PROFIT!</li>
      </ol>
    </div>
    
    </div>
    <div class="sidebar">

      <h2>Sidebar</h2>
      <p>Thanks to <a href="http://www.duke.edu/~efn/">Emmett Nicholas</a> for some great development ideas and code.</p>
      <p>
      In eu quam. Sed velit augue, rhoncus quis, tempus sed, euismod eu, tellus. Nam vitae libero. 
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc posuere. Nulla auctor est vel sem. 
      Nunc tellus nulla, nonummy sit amet, pharetra sed.</p>
    </div>
    <div style="clear: both;"></div>
  </body>
</html>